<template>
  <div class="write_mail_info">
    <div class="title" v-show="$store.state.oemObj.oemFlag">{{$t('config.channel.addMailTitle1Oem')}}</div>
    <div class="title" v-show="!$store.state.oemObj.oemFlag">{{$t('config.channel.addMailTitle1')}}</div>
    <el-form :model="addMailFormOne" ref="addMailFormOne" :rules="rules">
      <el-form-item class="form_item mail_form_li" prop="email" :label="this.$t('public.email')">
        <el-input v-model.trim="addMailFormOne.email" class="input_box"></el-input>
      </el-form-item>
      <el-form-item class="mail_form_li"  prop="change">
        <el-checkbox-group v-model="addMailFormOne.change">
          <el-checkbox :label="this.$t('config.channel.transferSureBtn', {mail: emailDomain})"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item class="mail_form_li">
        <el-button class="primary_btn" @click="cancel">{{$t('public.cancel')}}</el-button>
        <el-button class="primary_btn" @click="next('addMailFormOne')" type="primary">{{$t('public.nextStep')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'FirmMailAddOne',
    data () {
      return {
        addMailFormOne: {
          email: '',
          change: []
        },
        rules: {
          email: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
            {type: 'email', message: this.$t('configLazyLoad.channel.mailTip4'), trigger: 'blur'}
          ],
          change: [
            { type: 'array', required: true, message: this.$t('configLazyLoad.channel.required'), trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      emailDomain () {
        let email = this.$store.state.config.channelConfig.channelMail.mailInfo.data.name
        if (!email) {
          email = ''
        }
        return email
      }
    },
    methods: {
      cancel () {
        this.$emit('cancel')
      },
      next (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('next')
          } else {
            return false
          }
        })
      },
      changeDis () {
        window.alert(1)
        window.alert(this.state)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .write_mail_info
    text-align center
  .title
    font-size 16px
    margin-bottom 20px
  .form_item
    width 400px
    display inline-block
  .input_box
    width calc(100% - 60px)
</style>
